<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>10-使用then链式调用解决回调地狱</title>
</head>

<body>
  <script>
    // 可复用的发 ajax 请求的函数: xhr + promise
    function sendAjax (url, data) {
      // 1. 创建并返回 Promise 实例对象(pending 状态), 指定执行器函数
      return new Promise((resolve, reject) => {
        // 2. 在执行器函数中启动异步任务
        console.log('异步任务启动---');
        // 3.发送ajax请求
        const xhr = new XMLHttpRequest();
        //处理query请求参数，将对象形式转成字符串
        let queryStr = '';
        for (const key in data)
        {
          queryStr += `?${key}=${data[key]}&`;
        }
        queryStr = queryStr.slice(0, -1);
        xhr.open('GET', url + queryStr);
        xhr.send();
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4)
          {
            if (xhr.status >= 200 && xhr.status < 300)
            {
              // 请求成功, 调用 resolve(value)
              resolve(JSON.parse(xhr.response))
            } else
            {
              // 请求失败, 调用 reject(reason)
              reject(new Error('状态码：' + xhr.status))
            }
          }
        }
      })
    };

    //使用then链式调用解决发送多个异步请求的回调地狱问题
    sendAjax('https://api.github.com/search/users', { q: 'ajax' })
      .then(
        (value) => { //第一次请求成功后，获取数据并发送第二次请求,并将第二次请求的返回值返回给then
          console.log(`第一次请求成功的value：${value}`);
          return sendAjax('https://api.github.com/search/users', { q: 'promise' })
        },
        (reason) => { console.log(`第一次请求失败原因：${reason}`); }
      )
      .then(
        (value) => { //第二次请求成功后，获取数据并发送第三次请求,并将第三次请求的返回值返回给then
          console.log(`第二次请求成功的value：${value}`);
          return sendAjax('https://api.github.com/search/users', { q: 'then' })
        },
        (reason) => { console.log(`第二次请求失败原因：${reason}`); }
      )
      .then(
        (value) => { //第三次请求成功后，获取数据
          console.log(`第三次请求成功的value：${value}`);
        },
        (reason) => { console.log(`第三次请求失败原因：${reason}`); }
      )

  </script>
</body>

</html>